<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>TheMatrix</title>
    <style type="text/css">
        html, body {
            margin: 0;
            padding: 0;
            z-index: -100;
        }

        #title {
            position: fixed;
            font-size: 128px;
            color: #fff;
            z-index: 1;

            left: 50%;
            top: 45%;
            transform: translate(-50%,-50%);
        }

        /* 只有absolute和fixed不会有滚动条 */
        #defaultCanvas0 {
            position: absolute;
            z-index: -1;
        }
    </style>
</head>
<body>
<!-- 前景例子 -->
<div id="title">黑客帝国！</div>
<script type="text/javascript">
    // 基本配置
    let options = {
        // 背景色
        Background: '#000000',
        // 前景色
        Color: '#00ff00',
        Opacity: 150,
        // 字符 'Katakana', 'Braille','BoxDrawing','CJK Radicals Supplement','Kanbun','Yi Syllables'
        Unicode: 'Katakana',
        DropSpeed: 2,
        TextSpeed: 15,
        Size: 14,
        Direction: '↓',
        RotateAngle: 45,
        isPNG: false
    };
</script>
<script type="text/javascript" src="js/p5.min.js"></script>
<script type="text/javascript" src="js/sketch.js"></script>
</body>
</html>
